<template>
    <view class="structure-selecter" v-if="show">
        <view class="mark" @click="closed">

        </view>
        <view class="drawer" @click.stop="">
            <view class="drawer-header">
                <view class="drawer-header-touch" @click.stop="closed"></view>
                <view class="drawer-header-progress">
                    <view class="dhp-txt">
                        应用到其他电梯<text>(本项目关联电梯数: {{ bindNum }})</text>
                    </view>
                </view>
                <view class="search-bar">
                    <uni-icons color="#999" size="20" type="search" />
                    <input @input="filterFuc" v-model="keyword" class="ipt" placeholder="请输入梯号关键词" />
                </view>
            </view>

            <!-- 选择题内容 S -->
            <scroll-view ref="scrollView" scroll-y class="drawer-content">
                <!-- :disabled="item.selected" -->
                <label class="elevator-item" @click="chooseItem(item)" v-for="(item, index ) in elevators" :key="index">
                    <radio class="radio" :disabled="item.selected" :checked="elevatorIds.indexOf(item.elevatorId) != -1"
                        color="#0091FF">

                    </radio>
                    {{ item.elevatorAddress }}  
                </label>

            </scroll-view>
            <!-- 选择题内容 E -->
            <view class="drawer-footer">
                <view @click="submitFuc" class="drawer-footer-btn">确定</view>
            </view>
            <view class="tabs">
                <view @click="scrollToView(index)"
                    :class="['tabs-item', activeTab == index ? 'act' : '']" v-for="(item, index) in options"
                    :key="index">{{ item.name }}</view>
            </view>
        </view>
    </view>
</template>
<script> 
import { relationToStructureTemplate, getBindElevators } from '@/apis/elevator.js';
export default {
	name: 'elevator-selecter',
	data() {
		return {
			keyword:'',
			elevators: [],
			orgList:[],
			elevatorId: '',
			show: false, 
			scrollTop: 0,
			activeTab: 0,
			bindNum: 0,
			structureTemplateId: '',
			elevatorIds: []
		};
	},
	mounted() {

	},
	methods: {
		// 筛选
		filterFuc() {
			console.log('this.keyword',this.keyword);
			if (!this.keyword) {
				this.elevators = JSON.parse(JSON.stringify(this.orgList));
				return;
			}

			let arr = [];
			for (let i = 0; i < this.orgList.length; i++) {
				if ( this.orgList[i].elevatorAddress.indexOf(this.keyword) != -1) {
					arr.push(this.orgList[i]);
				}
			}
			this.elevators = arr; 
		},

		// 选中电梯
		chooseItem(res) {
			if (res.selected) {
				return;
			}
			// console.log(res);
			let idx = this.elevatorIds.indexOf(res.elevatorId);
			if (idx == -1) {
				this.elevatorIds.push(res.elevatorId);
			} else {
				this.elevatorIds.splice(idx, 1);
			}
		},

		// 获取列表
		getBindElevators() {
			getBindElevators({
				elevatorId: this.elevatorId
			}).then(res => {
				let ids = [];
				this.elevators = (res.data || []).map((item)=>{
					if (item.structureTemplateId == this.structureTemplateId) {
						ids.push(item.elevatorId);
					}
					return {...item,selected:item.structureTemplateId && item.structureTemplateId != this.structureTemplateId};
				});
				this.orgList = JSON.parse(JSON.stringify(this.elevators));
				this.elevatorIds = ids;
			});
		},
		// 提交
		async submitFuc() {
			let removeElevatorIds = [];
			let ids = [];
			for (let i = 0; i < this.orgList.length; i++) {
				if (!this.orgList[i].structureTemplateId) {
					if (this.elevatorIds.indexOf(this.orgList[i].elevatorId) != -1) {
						ids.push(this.orgList[i].elevatorId);
					}
				}
				if (this.orgList[i].structureTemplateId == this.structureTemplateId) {
					// 有相同的模板
					if (this.elevatorIds.indexOf(this.orgList[i].elevatorId) == -1) {
						// 取消选中
						removeElevatorIds.push(this.orgList[i].elevatorId);
					}
				}
			} 

			if (this.elevatorIds.length == 0 && removeElevatorIds.length == 0) {
				// 没填完
				uni.showToast({
					title: '您还没选中电梯',
					icon: 'none'
				});
				return;
			}
			if (ids.length == 0 && removeElevatorIds.length == 0) {
				this.$emit('success');
				this.show = false;
				uni.hideLoading();
				return;
			}
			uni.showLoading({
				title: '提交中',
				mask: true,
			});
			relationToStructureTemplate({
				elevatorIds:ids,
				removeElevatorIds:removeElevatorIds,
				structureTemplateId: this.structureTemplateId
			}).then(() => {
				this.$emit('success');
				this.show = false;
				uni.hideLoading();
			}).catch(() => {
				uni.hideLoading();
			});
		},

		init(form) {
			this.show = true;
			this.elevatorId = form.elevatorId;
			this.bindNum = form.bindNum;
			this.elevatorIds = [];
			this.structureTemplateId = form.structureTemplateId;
			this.getBindElevators();
		},

		closed() {
			this.show = false;
		},
		// 点击 tab 滚动到对应位置
		scrollToView(index) { 
			this.activeTab = index;
		},
		onScroll(e) {
			for (let i = 0; i < this.options.length; i++) {
				// console.log(1111,this.options[i].top);
				if (e.detail.scrollTop + 150 < this.options[i].top) {
					this.activeTab = Math.max(0, i - 1);
					break;
				}
			}
			// console.log(e.detail.scrollTop,this.activeTab, this.options);
		}
	}
};
</script>
<style lang="scss" scoped>
.structure-selecter {
    .mark {
        width: 100%;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.1696);
        z-index: 99;
    }

    @keyframes frame {
        from {
            bottom: -70vh;
        }

        to {
            bottom: 0;
        }
    }

    .drawer {
        width: 100%;
        height: 80vh;
        background-color: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 100;
        display: flex;
        flex-direction: column;
        animation: frame 0.2s linear;
        border-radius: 4px 4px 0px 0px;
        overflow: hidden;

        &-header {
            width: calc(100% - 80rpx);
            background-color: #fff;
            height: 200rpx;
            padding: 0 40rpx;

            &-touch {
                width: 100%;
                height: 10px;
                padding: 20rpx 0;
                position: relative;
            }

            &-touch::after {
                content: '';
                position: absolute;
                width: 64rpx;
                height: 10rpx;
                border-radius: 2rem;
                left: calc(50% - 32rpx);
                background: #D8D8D8;
            }

            &-progress {
                width: 100%;

                .dhp-txt {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    color: #333333;
                    font-weight: bold;
                    font-size: 32rpx;

                    text {
                        color: #666666;
                        font-weight: normal;
                        font-size: 24rpx;
                    }
                }
            }

            .search-bar {
                width: calc(100% - 32rpx);
                height: 64rpx;
                border-radius: 4px; 
                background: #F6F6F6;
                display: flex;
                align-items: center;
                margin: 0 auto;
                margin-top: 20rpx;
                padding: 0 16rpx;
                 
                .ipt{
                   font-size: 28rpx; 
                   flex: 1;
                   width: 100%;
                   margin-left: 12rpx;
                }
            }

        }

        &-content {
            flex: 1;
            width: 100%;
            height: calc(100% - 200rpx - 110rpx);
            overflow-y: scroll;
            color: #333333;

            .elevator-item {
                width: 100%;
                overflow: hidden; //超出的文本隐藏
                text-overflow: ellipsis; //溢出用省略号显示
                white-space: nowrap; //溢出不换行
                padding: 20rpx 0;
                border-bottom: 1px solid #eee;
                font-size: 28rpx;
                color: #333;
                display: flex;
                align-items: center;

                .radio {
                    transform: scale(0.8);
                    margin-left: 34rpx;
                }
            }
        }

        &-footer {
            height: 110rpx;
            width: 100%;
            background-color: #fff;

            &-btn {
                width: calc(100% - 80rpx);
                height: 70rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                border-radius: 8rpx;
                background-color: #0091FF;
                margin: 12px auto;
                font-size: 29rpx;
                text-align: center;
            }

        }

        .tabs {
            display: flex;
            flex-direction: column;
            position: absolute;
            right: 0;
            bottom: 44%;

            &-item {
                padding: 0 20rpx;

                height: 48rpx;
                line-height: 48rpx;
                border-radius: 24rpx 0px 0px 24rpx;
                color: #333;
                background-color: #fff;
                margin-top: 16rpx;
                border-width: 1px 0px 1px 1px;
                border-style: solid;
                border-color: #E6E9EB;
                transition: .3s all;
            }

            .act {
                border-color: #0091FF;
                color: #fff;
                background-color: #0091FF;
            }
        }

    }
}
</style>